<template>
  <div class="hello">
   		<h1>这噶哒是首页</h1>
   		<div class="index-wrap">
    		<slide-show :slides="slides"></slide-show>
  		</div>
  </div>
</template>

<script>
import slideShow from './slideShow'
export default {
  components: {
    slideShow
  },
  name: 'HelloWorld',
  data () {
    return {
      slides: [
        {
          src: require('../assets/1.jpg'),
          title: 'xxx1',
        },
        {
          src: require('../assets/2.jpg'),
          title: 'xxx2',
        },
        {
          src: require('../assets/3.jpg'),
          title: 'xxx3',
        },
        {
          src: require('../assets/4.jpg'),
          title: 'xxx4',
        },
        {
          src: require('../assets/5.jpg'),
          title: 'xxx5',
        }
      ]
    }
  }
}
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
 .index-wrap {
    overflow: hidden;
}
</style>
